<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin-left: 100px;
        }
        /* 
        思路：椭圆形是先设置一个长方形的盒子，在设置border-radius圆角边框属性就会得到一个椭圆形，如果是正方形盒子，得到的是圆形
         */
        .tuoyuan {
            width: 200px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }

        /* 
        思路：(1)三角形的实现原理就是利用边框来实现三角形，我们先设置一个宽高100px的盒子，4个边框设置粗细设置100px,实线,设置不同颜色，会得到里边一个白色正方形，外边4个梯形，把宽度和高度调到0，就会得到4个不同颜色的三角形，想要那个就保留那个，把其他三个设置透明色就可以,(2)可以设置左边框+下边框，左上，右上，右下，一个设置颜色一个透明色也可以得到跟第一种不同的三角形
         */
        .sanjiao {
            width: 0px;
            height: 0px;
            border-left: 100px solid orange;
            /* border-right: 100px solid blue; */
            /* border-top: 100px solid red; */
            border-bottom: 100px solid transparent;
        }

        /* 
        思路：先用一个盒子实现一个上边第2种的三角形，在设置这个盒子的伪元素设置为正方体,通过设置边框，圆角来实现小尾巴，然后再定位到三角形后面，设置旋转调整角度，效果实现。注意：伪元素必须设置content，伪元素的border-radius可以单独设置4个角的圆度，设置左上角的角实现小尾巴
         */
        .jiantou {
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-right: 10px solid red;
            transform: rotate(20deg);
            position: relative;
        }

        .jiantou:after {
            content: "";
            width: 10px;
            height: 10px;
            /* background: blue; */
            position: absolute;
            border-top: 5px solid red;
            border-radius: 10px 0 0 0;
            top: -12px;
            left: -7px;
            transform: rotate(45deg);
        }

        /* 
        思路：跟实现三角形的一样，只不过是反着来，三角形是想要那个给那个设置颜色，其他设置透明色，这个是3个边框设置粗细实线颜色，另一个设置透明色，再加个border-radius将正方形变为圆形就实现了
         */
        .chidouren {
            width: 0px;
            height: 0px;
            /* background: red; */
            /* border: 100px solid red; */
            border-right: 100px solid transparent;
            border-top: 100px solid red;
            border-left: 100px solid red;
            border-bottom: 100px solid red;
            border-radius: 50%;
        }
        /* 
        总结：聊天框是先用一个盒子生成一个圆角边框的长方形，再通过伪元素创建一个三角形，通过定位定位到长方体前边
         */
        .liaotian {
            width: 200px;
            height: 100px;
            border-radius: 15px;
            background: red;
            position: relative;
            left: 20px;
        }

        .liaotian:after {
            content: "";
            width: 0;
            height: 0;
            border-right: 25px solid red;
            border-left: 25px solid transparent;
            border-top: 25px solid transparent;
            border-bottom: 25px solid transparent;
            position: absolute;
            top: 25px;
            right: 200px;
        }
        /* 
        总结：爆炸图就是三个正方形在同一个位置上通过旋转角度得到的，用的是一个盒子加2个正方形伪元素旋转角度
         */
        .baozha{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
        .baozha:after{
            content: "";
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            transform: rotate(30deg)
        }
        .baozha:before{
            content: "";
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
            transform: rotate(60deg)
        }
        /* 
        思路：先用盒子完成一个圆形，再加边框粗细颜色形成一个空心圆，再用伪类生成一个长方形，通过旋转角度加定位到空心圆的右斜下方
         */
        .fangdajing{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50%;
            position: relative;
        }
        .fangdajing:after{
          content: "";
            width: 60px;
            height: 10px;
            background: red;
            position: absolute;
            transform: rotate(45deg);
            top: 100px;
            left: 85px;
        }
        /* 
        总结：利用边框生成圆锥形，宽高为0，3个边框设置粗细实线透明色，另一个设置边框颜色，跟三角形，吃豆人相似
         */
        .yuanzhui{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-radius: 50%;
        }
        /* 
        总结：先实现一个圆，利用圆的阴影，调整阴影位置设置阴影颜色，就会得到一个月牙
         */
        .yueliang{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* background: red; */
            box-shadow: 10px 10px 0 0 orange;
        }
        /* 
        总结：先用一个盒子生成一个横着的长方形，再用伪类生成竖着的长方形，通过定位形成十字架
         */
        .shizijia{
            width: 20px;
            height: 150px;
            background: red;
            position: relative;
        }
        .shizijia:after{
            content: "";
            position: absolute;
            width: 150px;
            height: 20px;
            background: red;
            top: 45%;
            left: -65px;
        }
    </style>
</head>

<body>
    <!-- 椭圆 -->
    <div class="tuoyuan"></div>
    <br>
    <!-- 三角形 -->
    <div class="sanjiao"></div>
    <br>
    <!-- 弯尾箭头 -->
    <div class="jiantou"></div>
    <br>
    <!-- 吃豆人 -->
    <div class="chidouren"></div>
    <br>
    <!-- 聊天 -->
    <div class="liaotian"></div>
    <br>
    <!-- 爆炸形状 -->
    <div class="baozha"></div>
    <br>
    <!-- 放大镜 -->
    <div class="fangdajing"></div>
    <br>
    <!-- 圆锥形 -->
    <div class="yuanzhui"></div>
    <br>
    <!-- 月亮 -->
    <div class="yueliang"></div>
    <br>
    <!-- 十字架 -->
    <div class="shizijia"></div>
</body>

</html>